<template applyDetailModify>
  <a-modal :width="type === 1 ? '800px' : '1150px'" :title="type === 1 ? '详情' : '记录修正'" :visible="value" :footer="null" :maskClosable="false" @cancel="onCancel">
    <a-spin tip="提交中..." :spinning="isSubLoading">
      <a-row :gutter="20">
        <a-col :span="type === 1 ? 24 : 16">
          <put-in-info :dataObject="getInfo"></put-in-info>
          <div class="table-box">
            <a-table v-if="type === 1" :columns="tableColumns" :pagination="false" :data-source="detailInfo.expensePutDataList" :scroll="{ x: 600, y: 320 }">
              <!-- 报销状态 -->
              <template slot="status" slot-scope="text, record">
                <span v-if="!record.status">未报销</span>
                <span v-else class="green-text">已报销</span>
              </template>
              <!-- 产品信息 -->
              <template slot="productId" slot-scope="text, record">
                <p>产品ID：{{ record.productId || '空' }}</p>
                <p>产品名称：{{ record.productName || '空' }}</p>
                <p>套餐ID：{{ record.productItemId || '空' }}</p>
                <p>套餐名称：{{ record.productItemName || '空' }}</p>
              </template>
              <!-- 作品信息 -->
              <template slot="videoId" slot-scope="text, record">
                <p>视频ID：{{ record.videoId || '空' }}</p>
                <p>视频链接：{{ record.videoUrl || '空' }}</p>
                <p>主播昵称：{{ record.nickName || '空' }}</p>
                <p>抖音号：{{ record.dyNo || '空' }}</p>
              </template>
              <!-- 投放信息 -->
              <template slot="putTime" slot-scope="text, record">
                <p>
                  投放金额：<span class="green-text">¥{{ record.money ? (record.money / 100).toFixed(2) : 0 }}</span>
                </p>
                <p>投放时间：{{ record.putTime || '空' }}</p>
              </template>
            </a-table>
            <a-table v-else :columns="tableColumns" :row-selection="rowSelection" :pagination="false" :data-source="detailInfo.expensePutDataList" :scroll="{ x: 600, y: 260 }">
              <!-- 报销状态 -->
              <template slot="status" slot-scope="text, record">
                <span v-if="!record.status">未报销</span>
                <span v-else class="green-text">已报销</span>
              </template>
              <!-- 产品信息 -->
              <template slot="productId" slot-scope="text, record">
                <p>产品ID：{{ record.productId || '空' }}</p>
                <p>产品名称：{{ record.productName || '空' }}</p>
                <p>套餐ID：{{ record.productItemId || '空' }}</p>
                <p>套餐名称：{{ record.productItemName || '空' }}</p>
              </template>
              <!-- 作品信息 -->
              <template slot="videoId" slot-scope="text, record">
                <p>视频ID：{{ record.videoId || '空' }}</p>
                <p>视频链接：{{ record.videoUrl || '空' }}</p>
                <p>主播昵称：{{ record.nickName || '空' }}</p>
                <p>抖音号：{{ record.dyNo || '空' }}</p>
              </template>
              <!-- 投放信息 -->
              <template slot="putTime" slot-scope="text, record">
                <p>
                  投放金额：<span class="green-text">¥{{ record.money ? (record.money / 100).toFixed(2) : 0 }}</span>
                </p>
                <p>投放时间：{{ record.putTime || '空' }}</p>
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :span="8" v-if="type === 2" class="form-box">
          <a-form-model ref="putInModalForm" :model="putInModalForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
            <a-form-model-item label="站点" prop="location" :rules="[{ required: true, message: '请输入关键字选择站点', trigger: 'blur' }]">
              <!-- @search="getAreaLocation(configInfo.area, $event)" -->
              <a-select
                show-search
                :allowClear="true"
                :showArrow="false"
                placeholder="请输入关键字选择站点"
                v-model="putInModalForm.location"
                @change="selectLoction"
                :disabled="isSelected"
                :filter-option="filterOption"
                @search="getAreaLocation(configInfo.areaId, $event)"
              >
                <a-spin v-if="userLoading" slot="notFoundContent" size="small" />
                <a-select-option v-for="(item, index) in allLocation" :key="index" :locationId="item.id" :value="item.city">{{ item.city }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="产品" prop="productName" :rules="[{ required: true, message: '请选择产品', trigger: 'blur' }]">
              <a-select
                @search="getProductList"
                v-model="putInModalForm.productName"
                @change="selectProduct"
                :showArrow="false"
                show-search
                :filter-option="false"
                :disabled="isSelected"
                allow-clear
                placeholder="请输入产品搜索"
              >
                <a-spin v-if="userLoading" slot="notFoundContent" size="small" />
                <a-select-option v-for="(item, index) in allProduct" :productId="item.productId" :itemsList="item.productItemList" :key="index" :value="item.productTitle">{{
                  item.productTitle
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="套餐" prop="productItemName" :rules="[{ required: true, message: '请选择套餐', trigger: 'blur' }]">
              <a-select
                show-search
                :allowClear="true"
                placeholder="请选择套餐"
                :disabled="isSelected"
                v-model="putInModalForm.productItemName"
                @change="selectProductiItem"
                :filter-option="filterOption"
              >
                <a-spin v-if="userLoading" slot="notFoundContent" size="small" />
                <a-select-option v-for="(item, index) in productItemList" :key="index" :itemId="item.productItemId" :value="item.productItemTitle">{{ item.productItemTitle }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="视频链接" prop="videoUrl" :rules="[{ required: true, message: '请输入视频链接', trigger: 'blur' }]">
              <a-input :disabled="isSelected" v-model="putInModalForm.videoUrl" :maxLength="50" placeholder="请输入视频链接"></a-input>
            </a-form-model-item>
            <a-form-model-item
              label="主播抖音号"
              prop="dyNo"
              :rules="[
                { required: true, message: '请输入主播抖音号', trigger: 'blur' },
                {
                  pattern: /^[a-zA-Z0-9_.]*$/,
                  message: '抖音号格式有误',
                  trigger: 'blur'
                }
              ]"
            >
              <a-input :disabled="isSelected" v-model="putInModalForm.dyNo" :maxLength="20" placeholder="请输入主播抖音号"></a-input>
            </a-form-model-item>
            <a-form-model-item
              label="投放金额"
              prop="money"
              :rules="[
                { required: true, trigger: 'blur', message: '请输入投放金额' },
                {
                  pattern: /^\d+(\.\d+)?$/,
                  message: '金额格式有误',
                  trigger: 'blur'
                }
              ]"
            >
              <a-input v-model="putInModalForm.money" :disabled="isSelected" placeholder="请输入投放金额" :maxLength="10"></a-input>
            </a-form-model-item>
            <a-form-model-item label="投放时间" prop="putTime" :rules="[{ required: true, message: '请选择投放时间', trigger: 'change' }]">
              <a-date-picker :disabled="isSelected" style="width:100%;" @change="changeTime" v-model="putInModalForm.putTime" />
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
      <!-- 操作 -->
      <div v-if="type === 2" style="text-align:right;margin:12px 0 -8px;">
        <a-button class="border-radious-2 color-333" style="background:#E5E5E5;border-color:#E5E5E5;" @click="onCancel">取消</a-button>
        <a-button type="primary" style="background:#1D6FE9;border-color:#1D6FE9;" class="border-radious-2" @click="submitModify">确认修改</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { douJiaColumn } from '../column'
import { getCommonApiSearch } from '@/service'
import putInInfo from './childComponents/putInInfo'
import { djMoneyPutUrl, allProductListUrl, locationArealUrl } from '@/service/djService'
import debounce from 'lodash/debounce'
import '@/assets/style/newStyle.scss'
import moment from 'moment'
// import putInForm from './childComponents/putInForm'
const g = function(item = {}) {
  return {
    douApplyId: item.douApplyId || 0,
    dyNo: item.dyNo || '',
    id: item.id || 0,
    location: item.location || '',
    locationId: item.locationId || undefined,
    money: item.money ? (item.money / 100).toFixed(2) : '',
    productId: item.productId || undefined,
    productItemId: item.productItemId || undefined,
    productItemName: item.productItemName || '',
    productName: item.productName || '',
    videoUrl: item.videoUrl || '',
    putTime: item.putTime ? moment(item.putTime).format('YYYY-MM-DD') : undefined
  }
}

export default {
  name: 'applyDetailModify',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1 // 1 详情 2 记录修正
    },
    getInfo: {
      type: Object,
      default: () => {}
    },
    detailInfo: {
      type: Object,
      default: () => {}
    },
    douApplyId: {
      type: Number | String,
      default: 0
    },
    configInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    getInfo(val) {
      console.log(val)
      //   this.applyModalForm = detailInfo
    },
    configInfo(val) {
      console.log(val)
      const { areaId = 0 } = val || {}
      this.getAreaLocation(areaId)
    }
  },
  components: { putInInfo },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (value, record) => this.onSelectChange(value, record),
        type: 'radio',
        getCheckboxProps: (record) => ({
          // 已报销/报销中的投放记录置灰显示已报销无法勾选 是否报销0未报销,1已报销
          props: {
            disabled: record.status !== 0, // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  data() {
    this.getLocationList = debounce(this.getLocationList, 800)
    this.getProductList = debounce(this.getProductList, 800)
    return {
      tableColumns: douJiaColumn.operatePutInDetail || [],
      userLoading: false,
      allUser: [],
      isSubLoading: false,
      putInModalForm: g({}),
      allLocation: [],
      allProduct: [],
      selectedRowKeys: [],
      productItemList: [],
      isSelected: true,
      selectSearch: {
        pageIndex: 1,
        pageSize: 10,
        keyWord: '',
        locationId: ''
      }
    }
  },
  methods: {
    moment,
    // 站点列表
    getAreaLocation(param1 = 0, param2 = '') {
      locationArealUrl({ configId: param1, city: param2, admin: 1 })
        .then((res = []) => {
          this.allLocation = res
          if (res.length === 0) {
            this.allLocation = []
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getLocationList(e) {
      if (!e) {
        return
      }
      this.userLoading = true
      getCommonApiSearch({ keywords: e })
        .then((res) => {
          console.log(res)
          this.allLocation = res
        })
        .finally(() => {
          this.userLoading = false
        })
        .catch(() => {
          this.userLoading = false
        })
    },
    // 产品列表
    async getProductList(keyWord = '') {
      console.log(keyWord)
      if (!keyWord) {
        return
      }
      this.userLoading = true
      this.selectSearch.keyWord = keyWord
      await allProductListUrl(this.selectSearch).then((res = []) => {
        this.allProduct = res
        this.userLoading = false
      })
    },
    selectProduct(e, option = {}) {
      const { data = {} } = option || {}
      this.putInModalForm.productItemName = ''
      this.putInModalForm.productItemId = ''
      this.productItemList = data.attrs && data.attrs.itemsList.length > 0 ? data.attrs.itemsList : []
      this.putInModalForm.productId = data.attrs && data.attrs.productId ? data.attrs.productId : ''
    },
    selectLoction(e, option) {
      const { data = {} } = option || {}
      this.putInModalForm.locationId = data.attrs && data.attrs.locationId ? data.attrs.locationId : ''
    },
    selectProductiItem(e, option) {
      console.log(e, option)
      const { data = {} } = option || {}
      this.putInModalForm.productItemId = data.attrs && data.attrs.itemId ? data.attrs.itemId : ''
    },
    onCancel() {
      this.$emit('input', false)
      this.putInModalForm = g()
      this.selectedRowKeys = []
      this.isSelected = true
      this.clearForm()
    },
    clearForm() {
      let form = this.$refs.putInModalForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    onSelectChange(selectedRowKeys, row) {
      this.selectedRowKeys = selectedRowKeys
      this.$set(this, 'putInModalForm', g(row[0]))
      this.$set(this, 'isSelected', false)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    changeTime(e) {
      console.log(e)
    },

    submitModify() {
      console.log(this.putInModalForm, this.douApplyId)
      const { money = 0, putTime = '' } = this.putInModalForm || {}
      const { availableMoney = 0 } = this.getInfo
      // if (money * 100 > availableMoney) {
      //   this.$messageSend.error('可投放金额不足')
      //   return
      // }
      this.$refs.putInModalForm.validate((valid, obj = {}) => {
        if (valid) {
          this.isSubLoading = true
          const params = { ...this.putInModalForm, money: money * 100, putTime: moment(putTime).format('YYYY-MM-DD hh:mm:ss') }
          djMoneyPutUrl(params)
            .then((res) => {
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              // this.$messageSend.success('修改成功')
              this.isSubLoading = false
            })
            .catch(() => {
              this.isSubLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .ant-modal-header {
  border-bottom: 1px solid transparent !important;
}
/deep/ .ant-modal-body {
  padding-top: 0;
}
/deep/ .ant-modal-footer {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.02), inset 0px -1px 0px 0px #f5f5f5;
}
/deep/ .ant-form-item {
  margin-bottom: 18px;
}
.flex {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
}
p {
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.table-box,
.form-box {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 16px;
}
</style>
